<template>
  <view class="container">
    <!-- VIP服务群弹出层 -->
    <uni-popup ref="servicePopup" type="center">
      <view class="service-popup">
        <view class="popup-content">
          <text class="popup-title">Hola, 终于等到您!</text>
          <text class="popup-subtitle">您的【VIP服务群】已上线，小伙伴们都在，就差您了！</text>
          <image class="service-icon" src="/static/guide/group.svg" mode="aspectFit"></image>
          <button class="join-btn" @click="handleJoinService">去加入</button>
        </view>
        <view class="close-btn" @click="closeServicePopup">
          <uni-icons type="close" size="45" color="#ffffff"></uni-icons>
        </view>
      </view>
    </uni-popup>
    
    <!-- 收款码弹出层 -->
    <uni-popup ref="qrcodePopup" type="bottom" background-color="#fff">
      <view class="qrcode-popup">
        <view class="qrcode-header">
          <image class="qrcode-avatar" src="/static/head.png" mode="aspectFill"></image>
          <text class="qrcode-title">逸臻公寓签约/收款码</text>
        </view>
        <view class="qrcode-content">
          <image class="qrcode-image" src="/static/workbench/erweima.svg" mode="aspectFit"></image>
        </view>
        <view class="qrcode-actions">
          <view class="action-item" @click="shareToWechat">
            <image src="/static/workbench/wx.svg" mode="aspectFit"></image>
            <text>微信</text>
          </view>
          <view class="action-item" @click="saveQrcode">
            <image src="/static/workbench/save.svg" mode="aspectFit"></image>
            <text>保存</text>
          </view>
        </view>
        <view class="qrcode-cancel" @click="closeQrcodePopup">
          <text>取消</text>
        </view>
      </view>
    </uni-popup>
    
    <!-- 页面容器 -->
    <view class="page-content">
      <keep-alive>
        <component :is="currentComponent" />
      </keep-alive>
    </view>

    <!-- TabBar -->
    <view class="custom-tab-bar">
      <view class="tab-bar-content">
        <view v-for="(item, index) in tabBarList" :key="index" class="tab-item"
          :class="{ active: currentPage === index }" @click="switchTab(index, item)">
          <view v-if="item.type === 'add'" class="add-button">
            <image :src="item.iconPath" mode="aspectFit" class="add-icon"></image>
          </view>
          <block v-else>
            <image :src="currentPage === index ? item.selectedIconPath : item.iconPath" mode="aspectFit"
              class="tab-icon"></image>
            <text class="tab-text">{{ item.text }}</text>
          </block>
        </view>
      </view>
    </view>
    <quick-action ref="quickAction"></quick-action>
  </view>
</template>

<script>
import QuickAction from '@/components/quick-actions/index.vue'
import Workbench from '@/pages/workbench/index.vue'
import House from '@/pages/house/index.vue'
import Contract from '@/pages/contract/index.vue'
import Message from '@/pages/message/index.vue'

export default {
  components: {
    QuickAction,
    Workbench,
    House,
    Contract,
    Message
  },
  data() {
    return {
      currentPage: 0,
      tabBarList: [
        {
          pagePath: "pages/workbench/index",
          text: "工作台",
          iconPath: "/static/tabbar/png/workbench.png",
          selectedIconPath: "/static/tabbar/png/workbench-active.png",
          component: 'Workbench'
        },
        {
          pagePath: "pages/house/index",
          text: "房源",
          iconPath: "/static/tabbar/png/house.png",
          selectedIconPath: "/static/tabbar/png/house-active.png",
          component: 'House'
        },
        {
          iconPath: "/static/tabbar/png/add.png",
          type: "add"
        },
        {
          pagePath: "pages/contract/index",
          text: "合同",
          iconPath: "/static/tabbar/png/contract.png",
          selectedIconPath: "/static/tabbar/png/contract-active.png",
          component: 'Contract'
        },
        {
          pagePath: "pages/message/index",
          text: "消息",
          iconPath: "/static/tabbar/png/message.png",
          selectedIconPath: "/static/tabbar/png/message-active.png",
          component: 'Message'
        }
      ]
    }
  },
  computed: {
    currentComponent() {
      const item = this.tabBarList[this.currentPage];
      return item?.component || 'Workbench';
    }
  },
  mounted() {
    // 监听打开服务弹窗的事件
    uni.$on('openServicePopup', this.openServicePopup)
    // 监听打开收款码弹窗的事件
    uni.$on('openQrcodePopup', this.openQrcodePopup)
  },

  beforeDestroy() {
    // 组件销毁前移除事件监听
    uni.$off('openServicePopup')
    uni.$off('openQrcodePopup')
  },
  methods: {
    /**
     * 切换底部标签页
     * @param {Number} index - 标签页索引
     * @param {Object} item - 标签页配置项
     */
    switchTab(index, item) {
      if (item.type === 'add') {
        this.$refs.quickAction.show();
        return;
      }
      this.currentPage = index;
    },
    
    /**
     * 打开VIP服务群弹出层
     */
    openServicePopup() {
      this.$refs.servicePopup.open()
    },

    /**
     * 关闭VIP服务群弹出层
     */
    closeServicePopup() {
      this.$refs.servicePopup.close()
    },

    /**
     * 处理加入VIP服务群按钮点击事件
     */
    handleJoinService() {
      // 处理加入服务群的逻辑
      uni.showToast({
        title: '正在跳转到服务群...',
        icon: 'none'
      })
      this.closeServicePopup()
    },
      /**
     * 打开收款码弹出层
     */
    openQrcodePopup() {
      this.$refs.qrcodePopup.open()
    },

    /**
     * 关闭收款码弹出层
     */
    closeQrcodePopup() {
      this.$refs.qrcodePopup.close()
    },

    /**
     * 分享到微信
     */
    shareToWechat() {
      uni.showToast({
        title: '分享到微信',
        icon: 'none'
      })
      // 这里添加实际的微信分享逻辑
    },

    /**
     * 保存收款码到相册
     */
    saveQrcode() {
      uni.showLoading({
        title: '保存中...'
      })

      // 这里添加实际的保存图片逻辑
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
  overflow: hidden;
}

/* 页面内容区域，自动填充剩余空间 */
.page-content {
  flex: 1;
  overflow: hidden;
}

.custom-tab-bar {
  flex-shrink: 0;
  height: calc(100rpx + env(safe-area-inset-bottom));
  background-color: #ffffff;
  box-shadow: 0 -2rpx 2rpx rgba(0, 0, 0, 0.1);
  z-index: 99;
}

.tab-bar-content {
  display: flex;
  height: 100rpx;
  width: 100%;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 6rpx 0;

  &.active {
    .tab-text {
      color: #1890ff;
    }
  }
}

.tab-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 4rpx;
}

.tab-text {
  font-size: 20rpx;
  transform: scale(0.9);
  color: #7A7E83;
}

.add-button {
  width: 54rpx;
  height: 54rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4rpx;
}

.add-icon {
  width: 54rpx;
  height: 54rpx;
}
// 添加vip服务弹出层样式
.service-popup {
  display: flex;
  flex-direction: column;
  align-items: center;

  .popup-content {
    position: relative;
    background-color: #fff;
    border-radius: 24rpx;
    padding: 40rpx;
    text-align: center;
    width: 560rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .popup-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }

  .popup-subtitle {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 30rpx;
    padding: 0 20rpx;
  }

  .service-icon {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 30rpx;
  }

  .join-btn {
    width: 320rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #1890ff;
    color: #fff;
    font-size: 28rpx;
    border-radius: 40rpx;
  }

  .close-btn {
    padding-top: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64rpx;
    height: 64rpx;
  }
}

// 添加收款码弹出层样式
.qrcode-popup {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom); // 添加底部安全区域高度
  
  .qrcode-header {
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f0f0f0;
    
    .qrcode-avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .qrcode-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .qrcode-content {
    padding: 40rpx;
    display: flex;
    justify-content: center;
    
    .qrcode-image {
      width: 400rpx;
      height: 400rpx;
    }
  }
  
  .qrcode-actions {
    display: flex;
    justify-content: center;
    padding: 20rpx 0 40rpx;
    
    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 60rpx;
      
      image {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 10rpx;
      }
      
      text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
  
  .qrcode-cancel {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 10rpx solid #f5f5f5;
    
    text {
      font-size: 32rpx;
      color: #333;
    }
  }
}
// 添加全局弹出层样式，确保弹出层在导航栏之上
:deep(.uni-popup) {
  z-index: 999 !important;
}

:deep(.uni-popup__mask) {
  z-index: 998 !important;
}

:deep(.uni-popup__wrapper) {
  z-index: 999 !important;
}
</style>